import React, { useState } from 'react'
import { ChevronDown, ChevronUp } from 'lucide-react'

export default function FAQ() {
  const [openIndex, setOpenIndex] = useState<number | null>(null)

  const faqs = [
    {
        question: "可以免费试用吗？",
        answer: "是的，我们提供免费体验版，包含基础功能。"
    },
    {
      question: "支持哪些支付方式？",
      answer: "目前仅支持微信支付。"
    },
    {
      question: "数据安全如何保障？",
      answer: "我们采用企业级加密技术，所有数据传输都经过SSL加密，并定期进行安全备份，确保您的数据安全可靠。"
    },
    {
      question: "支持哪些设备？",
      answer: "我们的服务支持所有现代浏览器，并提供移动端适配，可在手机、平板和电脑上使用。"
    }
  ]

  return (
    <section className="pb-10 bg-gradient-to-b from-white to-gray-50">
      <div className="container mx-auto px-4">
        <h2 className="text-4xl font-bold text-center mb-12 text-gray-900">常见问题</h2>
        <div className="max-w-3xl mx-auto space-y-4">
          {faqs.map((faq, index) => (
            <div key={index} className="border border-gray-200 rounded-lg overflow-hidden">
              <button
                onClick={() => setOpenIndex(openIndex === index ? null : index)}
                className="w-full flex items-center justify-between p-6 bg-white hover:bg-gray-50 transition-colors duration-200"
              >
                <span className="text-lg font-medium text-gray-900">{faq.question}</span>
                {openIndex === index ? (
                  <ChevronUp className="w-5 h-5 text-gray-500" />
                ) : (
                  <ChevronDown className="w-5 h-5 text-gray-500" />
                )}
              </button>
              {openIndex === index && (
                <div className="p-6 pt-0 bg-gray-50">
                  <p className="text-gray-600 leading-relaxed">{faq.answer}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}